
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			<h2>测试: v-for 遍历数组</h2>
			<ul>
				<li v-for="(p, index) in persons" :key="index">
					{{index}}---{{p.name}}---{{p.age}}
					<button @click="deleteP(index)">删除</button>
					<button @click="updataP(index, {name: 'Cat', age: 15})">更新</button>
				</li>
			</ul>
			
			<h2>测试: v-for 遍历对象</h2>
			<ul>
				<li v-for="(value, key) in persons[1]" :key="key"> 
					{{value}}---{{key}}
				</li>
			</ul>
		</div>
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			// Vue本身只是监控了persons的改变, 没有监视数组内部数据的改变
			// Vue重写了数组中的一系列改变数据的方法(先调用原生, 更新界面) --->数组内部改变, 界面自动变化
			new Vue({
				el: "#demo",
				data: {
					persons:[
						{name: 'Tom', age: 18},
						{name: 'Jack', age: 19},
						{name: 'Bob', age: 20},
						{name: 'Rose', age: 21},
					]
				},
				methods:{
					deleteP(index){
						// 删除persons中的index的p
						this.persons.splice(index, 1)
					},
					updataP(index, newP){
						//this.persons[index] = newP  // 并没有改变persons本身, 数组内部发生了变化, 但并没有调用变异方法, vue不会更新界面
						this.persons.splice(index, 1, newP)
					}
				}
			})
		</script>
	</body>
</html>

